import {CheckOutlined, InboxOutlined, UndoOutlined} from '@ant-design/icons';
import {Modal, message, Form, Input, Space, Button} from 'antd';
import React, { useState, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import '@/assets/css/index.less';
import ProForm, { ProFormText, ProFormSelect } from '@ant-design/pro-form';
import { useForm } from 'antd/es/form/Form';
import axios from 'axios';
import { useLocation } from 'umi';
import { VideoPlayer } from '@/utils/videoPlayer';
import { insertVideo } from '@/services/videoManager';
import { UploadFile } from 'antd/lib/upload';
import MultiImgUpload from '@/components/multiImgUpload';
import VideoUpload from '@/components/videoUpload';

import {BASE_URL} from "../../../../proxyConfig";

const MNTPrefix = BASE_URL;

const { TextArea } = Input;

const VideoPublish: React.FC = () => {
  const playerRef = React.useRef(null);

  const location = useLocation();
  const [currentFormValues, setCurrentFormValues] = useState(location.state?.formValues);
  const [videoData, setVideoData] = useState([]);
  const [form] = useForm();
  const [form_coverImage] = useForm();

  const [fileList, setFileList] = useState<UploadFile[]>([]);
  const [coverResponseInfo, setCoverResponseInfo] = useState([]);
  const [coverImageFile, setCoverImageFile] = useState<UploadFile[]>([]);
  const [videoResponse, setVideoResponse] = useState({});
  const onSubmit = async (values) => {
    //    console.log(fileList[0].response.data.data[0].src);
    //    const coverImageSrc = fileList ? fileList[0].response.data.data[0].src:''
    var videoInfo = videoResponse;
    const hide = message.loading('正在发布视频，可能时间会比较长，请您耐心等待。', 0);

    videoInfo['title'] = values.title;
    videoInfo['description'] = values.des;
    if (coverResponseInfo.length > 0)
      videoInfo['coverImage'] = MNTPrefix + coverResponseInfo[0].src;
    // values.fileList.fileList.

    const res = await insertVideo(videoInfo);
    if (res.code == 0) {
      message.success('上传成功');
      hide();
      window.location.href = window.location.href.replace(/videoPublish/, 'mediaManagement');
    } else {
      hide();
      message.info(res.data);
    }
  };

  const formLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 14,
    },
  };
  const validateVideo = (rule, value, callback) => {
    if (Object.keys(videoResponse).length != 0) {
      callback();
    } else if (!value) {
      callback('请上传视频！');
    }
  };

  return (
    <PageContainer>
      <ProForm
        form={form}
        layout="horizontal"
        {...formLayout}
        initialValues={currentFormValues || {}}
        onFinish={onSubmit}
        onReset={() => window.history.back()}
        submitter={{
          render: (_, dom) => (
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <Space>
                {/*{dom}*/}
                {<Button onClick={() => {
                  _.reset()
                }}><UndoOutlined />返回</Button>}
                {<Button type={"primary"} onClick={() => {
                  _.submit()
                }}><CheckOutlined />提交</Button>}

              </Space>
            </div>
          ),
        }}
      >
        <ProFormText
          rules={[
            {
              required: true,
              message: '主题名称必填',
            },
          ]}
          width="md"
          name="title"
          placeholder="请填写主题名称"
          label="主题"
        />
        <Form.Item label="描述" name="des">
          <TextArea
            className=""
            showCount
            maxLength={300}
            // style={{ height: 120, marginBottom: 24, width: 300}}
            // onChange={onChange}
            placeholder="输入备注信息"
          />
        </Form.Item>

        <Form.Item label="封面图片" name="coverImage">
          <MultiImgUpload
            target="cover"
            form={form_coverImage}
            fileList={coverImageFile}
            setFileList={setCoverImageFile}
            url={'/api/v1/photo/uploadList'}
            fileResponse={coverResponseInfo}
            setResponse={setCoverResponseInfo}
          />
        </Form.Item>

        <Form.Item
          label="上传视频"
          name="fileList"
          rules={[
            {
              required: true,
              message: '请上传视频',
              validator: validateVideo,
            },
          ]}
        >
          <VideoUpload
            // fileList={fileList}
            // setFileList={setFileList}
            // url={"/api/v1/photo/uploadList"}
            fileResponse={videoResponse}
            setResponse={setVideoResponse}
          />
        </Form.Item>
      </ProForm>
    </PageContainer>
  );
};
export default VideoPublish;
